import React from 'react';
import styles from './index.less';
import { Row, DatePicker, Select, Spin, Button } from 'antd';
import * as echarts from 'echarts';
import 'echarts/lib/chart/boxplot';
import moment from 'moment';
import { connect } from 'umi';
import PropTypes from 'prop-types';
import styled from 'styled-components';

import { TRAlert, TRDefault, TRMessage } from '#/components';
import { CaretDownOutlined, UploadOutlined, SyncOutlined } from '#/utils/antdIcons';
import { HttpCode } from '#/utils/contacts';
import emitter from '#/utils/events';
import { Debounce, downloadHandle } from '#/utils/utils';

import { TRTooltip } from '@/components';
import { export_json_to_excel } from '@/utils/fileExport';

import { formatName } from '../ElectEcharts/helper';
import {
  getForecaseTradingSupplyAndDemandAnalysis,
  getTradingSupplyAndDemandData,
} from '../services';
import {
  contain,
  stackDataArr,
  supplyAndDemandOptions,
  supplyAndDemandOptionsCompare,
  TIME_SUFFIX,
  formatCopper1,
  formatJson,
  timelineMap,
} from './helper';

const BoxWrap = styled.div`
  background: var(--bg-main);
  padding: 0px 14px 14px 14px;
  margin: 0px 24px 15px 24px;
`;

const { Option } = Select;
const { RangePicker } = DatePicker;
const dateFormat = 'YYYY-MM-DD';
const dateFormat1 = 'YYYY.MM.DD';
const dataFormats = 'YYYYMMDD';
class DemandSupplyAnalysis extends React.Component {
  __isLoading__ = false;
  constructor(props) {
    super(props);
    this.state = {
      isclick: true,
      isDefault: 1,
      isCharLoading: false,
      supplyAndDemandAnalysisMap: [],
      emptyMessage: '暂无数据',
      supplyAndDemandUnit: TIME_SUFFIX[0].value,
      supplyAndDemanStart: moment().subtract(3, 'days').format(dateFormat),
      supplyAndDemanEnd: moment().add(4, 'days').format(dateFormat),
      substitution: 'powergrid',
      originalObj: {},
      hiddenEcharts: false,
      currentIndex: 0,
    };
    this.getExEportInfoData = Debounce(this._exportInfoData, 1000);
  }

  componentDidMount() {
    this._getSupplyAndDemandAnalysisList();
    this.onWindowResize = this._updatePosition.bind(this);
    this.onMnueChange = this._updatePosition.bind(this);
    this.__eventEmitter__ = (stationId) => {
      this.setState(
        {
          isDefault: 1,
          hiddenEcharts: false,
          supplyAndDemandUnit: TIME_SUFFIX[0].value,
          supplyAndDemanStart: moment().subtract(3, 'days').format(dateFormat),
          supplyAndDemanEnd: moment().add(4, 'days').format(dateFormat),
        },
        () => {
          this._getSupplyAndDemandAnalysisList(stationId);
        },
      );
    };

    this._myChart = echarts.init(document.getElementById('echartdeman'));
    this._myChart1 = echarts.init(document.getElementById('echartdeman1'));

    this._myChart.on('timelinechanged', this._ontimelinechanged.bind(this));
    this._myChart.on('legendselectchanged', this._onlegendselectchanged.bind(this));
    this._myChart1.on('legendselectchanged', this._onlegendselectchanged1.bind(this));
    window.addEventListener('resize', this.onWindowResize);
    emitter.addListener('onChangeMnue', this.onMnueChange);
    emitter.addListener('onChangeUnit', this.__eventEmitter__);

    // this._computeData(supplyAndDemandAnalysisMapFormat, timeline);
    // this.setState({
    //   isCharLoading: false,
    //   supplyAndDemandAnalysisMap: supplyAndDemandAnalysisMapFormat,
    //   timeline: timeline,
    // });

    emitter.addListener('onGlobalThemeChange', (e) => {
      setTimeout(() => {
        this._computeData(this.state.supplyAndDemandAnalysisMap, this.state.timeline);
      }, 100);
    });
  }
  componentWillUnmount() {
    emitter.removeListener('onGlobalThemeChange', () => {});
    this.__eventEmitter__ && emitter.removeListener('onChangeUnit', this.__eventEmitter__);
  }

  _updatePosition() {
    this.timer = setTimeout(() => {
      this._myChart && this._myChart.resize();
      this._myChart1 && this._myChart1.resize();
    }, 400);
  }

  async _getSupplyAndDemandAnalysisList(_stationId) {
    const { formValue } = this.props;
    const { stationId, marketId } = formValue;

    if (this.__isLoading__ == true) {
      return;
    }
    this.__isLoading__ = true;
    const { isDefault, supplyAndDemandUnit, supplyAndDemanStart, supplyAndDemanEnd, currentIndex } =
      this.state;
    this.setState({ isCharLoading: true });
    let res = await getForecaseTradingSupplyAndDemandAnalysis({
      isDefault: isDefault,
      dataType: supplyAndDemandUnit,
      startDate: supplyAndDemanStart,
      endDate: supplyAndDemanEnd,
      stationId: _stationId || stationId,
      marketId,
    });
    this.__isLoading__ = false;
    if (res && res.statusCode === HttpCode.SUCCESS) {
      let { supplyAndDemandAnalysisMap = {}, supplyAndDemandRealityMap = [] } = res.data;

      if (supplyAndDemandRealityMap?.length > 0) {
        Object.keys(supplyAndDemandAnalysisMap).forEach((timeline) => {
          supplyAndDemandAnalysisMap[timeline].push(...supplyAndDemandRealityMap);
        });
      }

      if (Object.keys(supplyAndDemandAnalysisMap).length > 0) {
        // 隐藏火电最小
        for (let key in supplyAndDemandAnalysisMap) {
          supplyAndDemandAnalysisMap[key] =
            supplyAndDemandAnalysisMap?.[key]?.filter((i) => i.name !== '火电最小') || [];
        }

        const timeline = Object.keys(supplyAndDemandAnalysisMap).map((item) => {
          return formatName(item, 1);
        });

        const supplyAndDemandAnalysisMapFormat = Object.values(supplyAndDemandAnalysisMap);
        this._onFistPostion(supplyAndDemandAnalysisMapFormat[currentIndex]);
        this._computeData(supplyAndDemandAnalysisMapFormat, timeline);
        this.setState({
          isCharLoading: false,
          supplyAndDemandAnalysisMap: supplyAndDemandAnalysisMapFormat,
          timeline: timeline,
        });
      } else {
        this._onFistPostion([]);
        this.setState({
          supplyAndDemandAnalysisMap: [],
          timeline: [],
          isCharLoading: false,
          emptyMessage: '暂无数据',
        });
      }
    } else {
      this._onFistPostion([]);
      this.setState({
        supplyAndDemandAnalysisMap: [],
        emptyMessage: res?.message || '系统异常',
        isCharLoading: false,
        timeline: [],
      });
    }
  }

  _getSuperposition = (third, first, secont) => {
    const dataXin = first?.list.map((item, inde) => {
      let dataSum = 0;
      if (
        item?.value === '-' &&
        secont?.list[inde]?.value === '-' &&
        third?.list[inde]?.value === '-'
      ) {
        dataSum = null;
      } else {
        dataSum =
          Number((item?.value || '-') === '-' ? 0 : item?.value) +
          Number((secont?.list[inde]?.value || '-') === '-' ? 0 : secont?.list[inde]?.value) +
          Number((third?.list[inde]?.value || '-') === '-' ? 0 : third?.list[inde]?.value);
      }

      return {
        ...item,
        value: dataSum,
      };
    });
    return dataXin;
  };
  // 图表1
  _computeData = (dataValue, timeline) => {
    const { supplyAndDemandUnit, substitution, currentIndex } = this.state;
    const { formValue } = this.props;
    const { marketId } = formValue;

    // stackList
    // const sumData = dataValue[currentIndex].filter(
    //   (i) => stackArr.includes(i.name) || stackList[substitution].includes(i.name),
    // );
    // const [first = {}, secont = {}, ...third] = sumData;
    // const listArr = third.map((item) => {
    //   const list = this._getSuperposition(item, first, secont);
    //   return {
    //     ...item,
    //     list: list,
    //   };
    // });
    // let originalObj = {};
    // let toopFormat = 'YYYYMMDD HHmm';
    // dataValue[currentIndex].map((item) => {
    //   if (stackList[substitution].includes(item.name)) {
    //     originalObj[item.name] = {};

    //     item?.list.map((i) => {
    //       if (item.xType === 'timer') {
    //         let tooptitle = moment(Number(i.xAxis)).format(toopFormat);
    //         if (tooptitle.indexOf('0000') > 0 && supplyAndDemandUnit === 0) {
    //           tooptitle = moment(Number(i.xAxis)).subtract(1, 'days').format(toopFormat);
    //         }
    //         tooptitle = tooptitle.replace(/0000/, '2400');
    //         originalObj[item.name][tooptitle] = i.value;
    //       } else {
    //         let tooptitle = '';
    //         if (supplyAndDemandUnit === 5) {
    //           tooptitle = moment(i.xAxis).format('YYYYMMDD');
    //         } else if (supplyAndDemandUnit === 6) {
    //           tooptitle = moment(i.xAxis).format('YYYYMM');
    //         } else {
    //           const listarr = i.xAxis?.split(':');
    //           tooptitle = `${listarr[0]}${listarr[1]}`;
    //           tooptitle = tooptitle.replace(/0000/, '2400');
    //         }
    //         originalObj[item.name][tooptitle] = i.value;
    //       }
    //     });
    //     const [listObj = {}] = listArr.filter((m) => {
    //       return m.name === item.name;
    //     });
    //     return {
    //       ...item,
    //       list: listObj?.list || [],
    //       a: 1,
    //     };
    //   }
    //   return {
    //     ...item,
    //   };
    // });

    // this.setState({ originalObj });
    const option = supplyAndDemandOptions(
      dataValue,
      this._tooltipFormatter.bind(this),
      substitution,
      supplyAndDemandUnit,
      true,
      timeline,
      [],
      // listArr,
      marketId,
    );
    this._myChart.setOption(option, true);

    this._computeData1(dataValue.length ? dataValue[currentIndex] : []);
  };
  // 图表2
  _computeData1 = (dataValue) => {
    const { substitution, supplyAndDemandUnit } = this.state;
    const { formValue } = this.props;
    const { marketId } = formValue;

    const displaceArr = dataValue?.filter((i) => contain.includes(i.name));
    const data = supplyAndDemandOptionsCompare(
      displaceArr,
      this._tooltipFormatterFun.bind(this),
      substitution,
      supplyAndDemandUnit,
      false,
      marketId,
    );
    this._myChart1.setOption(data, true);
  };

  _onCheckDataEmpty(array) {
    if (array.length === 0) {
      return false;
    }
    let arr = array.filter((item) => {
      let i = item.list.filter((jitem) => jitem.value !== '-' && jitem.value !== '#DIV/0!');
      return i.length > 0;
    });
    return arr.length > 0;
  }
  //下拉框
  _onChangeSuffix(value) {
    const { supplyAndDemanStart, supplyAndDemanEnd } = this.state;
    this.setState(
      {
        supplyAndDemandUnit: value,
        isDefault: 0,
        supplyAndDemanStart: supplyAndDemanStart,
        supplyAndDemanEnd: supplyAndDemanEnd,
        currentIndex: 0,
        selected: null,
      },
      () => {
        this._getSupplyAndDemandAnalysisList();
      },
    );
  }
  //日期选择框
  _onChangeDatePicker(dates) {
    this.setState(
      {
        supplyAndDemanStart: dates[0].format('YYYY-MM-DD'),
        supplyAndDemanEnd: dates[1].format('YYYY-MM-DD'),
        isDefault: 0,
        rangeOldData: [dates[0], dates[1]],
        currentIndex: 0,
        selected: null,
      },
      () => {
        this._getSupplyAndDemandAnalysisList();
      },
    );
  }
  //导出接口
  async _exportInfoData() {
    try {
      const { formValue } = this.props;
      const { stationId } = formValue;

      const { supplyAndDemandUnit, supplyAndDemanStart, supplyAndDemanEnd } = this.state;
      const typeName = TIME_SUFFIX.filter((i) => {
        return i.value === supplyAndDemandUnit;
      })?.[0]?.title;
      let data = await getTradingSupplyAndDemandData({
        dataType: supplyAndDemandUnit,
        startDate: supplyAndDemanStart,
        endDate: supplyAndDemanEnd,
        stationId,
        dataTypeName: typeName,
      });
      if (data.data && data.data instanceof Blob) {
        const realFileName = data.res.headers.get('content-disposition').split('filename=')[1];
        downloadHandle(data.data, decodeURI(realFileName));
      } else {
        TRAlert.error('导出失败');
      }
    } catch (e) {
      TRAlert.error('导出失败');
    }
  }

  // 获取导出第一列
  getXAxis(item, Unit) {
    let xType = '';
    const tempXData = [];
    item?.list?.map((cell) => {
      xType = item.xType;
      let dqFormat = 'HHmm';
      let toopFormat = 'YYYYMMDD HHmm';
      let Xtitle = moment(Number(cell.xAxis)).format(dqFormat);
      let tooptitle = moment(Number(cell.xAxis)).format(toopFormat);
      // serie.color = item.color
      if (item.xType === null || item.xType == 'timer') {
        if (Xtitle === '0000') {
          Xtitle = '2400';
        }

        if (tooptitle.indexOf('0000') > 0) {
          tooptitle = moment(Number(cell.xAxis)).subtract(1, 'days').format(toopFormat);
        }
        tooptitle = tooptitle.replace(/0000/, '2400');
        if (Unit === 0) {
          tempXData.push(tooptitle);
        } else {
          tempXData.push(Xtitle);
        }

        // serie.color = item.color
        // serie.selectorColor = item.color
      } else {
        let timesDate = cell.xAxis;

        if (Xtitle === 'Invalid date') {
          if (Unit === 5) {
            dqFormat = 'YYYYMMDD';
            toopFormat = 'YYYYMMDD';
          } else if (Unit === 6) {
            dqFormat = 'YYYYMM';
            toopFormat = 'YYYYMM';
          }
          timesDate = moment(cell.xAxis).format(dqFormat);
          if (timesDate === 'Invalid date') {
            const llistarr = cell.xAxis?.split(':');
            timesDate = `${llistarr[0]}${llistarr[1]}`;
          }
          tempXData.push(timesDate);
        } else {
          timesDate = moment(cell.xAxis).format('YYYYMM');
          tempXData.push(timesDate);
        }
      }
    });
    return tempXData;
  }
  // 获取导出行
  getRowData(item, colHead) {
    const tempXData = [];
    item.map((yItem, yIndex) => {
      yItem?.list?.map((cell, cIndex) => {
        const obj = {};
        obj.date = colHead[cIndex];
        obj[yItem.name] = cell.value;
        tempXData[cIndex] = { ...tempXData[cIndex], ...obj };
      });
    });
    return tempXData;
  }
  _onexport() {
    const {
      supplyAndDemandAnalysisMap,
      currentIndex,
      supplyAndDemandUnit,
      supplyAndDemanStart,
      supplyAndDemanEnd,
      timeline,
    } = this.state;

    const { formValue } = this.props;
    const { stationName } = formValue;

    const timeInterval = `${supplyAndDemanStart}至${supplyAndDemanEnd}`;
    const dimension = TIME_SUFFIX.filter((i) => {
      return i.value === supplyAndDemandUnit;
    })?.[0]?.title;
    const versionNumber = timeline[currentIndex];
    let filename = `供需分析-${stationName}-${timeInterval}`;

    const data = supplyAndDemandAnalysisMap[currentIndex];
    const header = data.map((t) => t.name);
    const params = {
      header: [
        '时间',
        ...header,
        // '系统负荷-联络线',
        // '火电最小',
        // '水电计划',
        // '新能源预测1',
        // '新能源预测2',
        // '新能源预测3',
        // '新能源预测4',
      ],
      data: [],
      filename,
    };
    const colHead = this.getXAxis(data[0], supplyAndDemandUnit);
    const rowData = this.getRowData(supplyAndDemandAnalysisMap[currentIndex], colHead);
    const placeholder = new Array(header.length - 1).fill('');
    const rowD = [
      ['时间范围', timeInterval, ...placeholder],
      ['聚合维度', dimension, ...placeholder],
      ['结算单元', stationName, ...placeholder],
      ['版本号', versionNumber, ...placeholder],
      ['单位', 'MW', ...placeholder],
    ];
    const filterVal = [
      'date',
      ...header,
      // '系统负荷-联络线',
      // '火电最小',
      // '水电计划',
      // '新能源预测1',
      // '新能源预测2',
      // '新能源预测3',
      // '新能源预测4',
    ];
    params.data = formatJson(filterVal, rowData);
    params.multiHeader = rowD;
    export_json_to_excel(params);
  }

  _exportInfo(hasSave) {
    // 导出
    if (!hasSave) {
      return TRMessage.info('请联系管理员获取相关权限');
    }
    this._onexport();
  }

  _onFistPostion(param, selObj, flag = false, isEchartsTwo = false) {
    const { hiddenEcharts } = this.state;

    let params = param ? [...param] : [];
    if (flag) {
      params = params.filter((i) => stackDataArr.includes(i.name));
    }
    if (!this._onCheckDataEmpty(params)) {
      return this.__tooltip_ && this.__tooltip_.show('', []);
    }
    let { supplyAndDemandUnit } = this.state;
    let array = [];
    let timer = '';
    let arrayList = [];
    params.forEach((item) => {
      var fistitem = item.list[0];
      const isTimeStamp = !new RegExp(/[\-|.|:]/g).test(fistitem.xAxis);
      timer = isTimeStamp ? Number(fistitem.xAxis) : fistitem.xAxis.replace(/[\-|.|:]/g, '');
      if (supplyAndDemandUnit === 0) {
        timer = moment(timer).format('YYYYMMDD HHmm');
      }

      let color = item.color;
      if (stackDataArr.includes(item.name)) {
        arrayList.push({ name: item.name, value: formatCopper1(fistitem.value), color: color });
      }
      array.push({ name: item.name, value: formatCopper1(fistitem.value), color: color });
    });
    if (selObj) {
      if (isEchartsTwo) {
        arrayList = arrayList.filter((item) => {
          return selObj[item.name] === true;
        });
      } else {
        array = array.filter((item) => {
          return selObj[item.name] === true;
        });
      }
    }
    if (hiddenEcharts) {
      this.__tooltip1_ && this.__tooltip1_.show(timer, arrayList);
    }
    if (!flag) {
      this.__tooltip_ && this.__tooltip_.show(timer, array);
    }
  }
  _onlegendselectchanged(params) {
    const {
      supplyAndDemandAnalysisMap,
      currentIndex,
      timeline,
      supplyAndDemandUnit,
      substitution,
    } = this.state;
    const { formValue } = this.props;
    const { marketId } = formValue;

    const { selected } = params;
    this.setState({
      selected: selected,
    });
    this._onFistPostion(supplyAndDemandAnalysisMap[currentIndex], selected);

    if (params.name === '水电计划') {
      const option = supplyAndDemandOptions(
        supplyAndDemandAnalysisMap,
        this._tooltipFormatter.bind(this),
        substitution,
        supplyAndDemandUnit,
        true,
        timeline,
        [],
        marketId,
      );
      if (selected?.['水电计划']) {
        this._myChart.setOption(option);
      } else {
        option.baseOption.yAxis.axisLabel.formatter = '{value}';
        option.baseOption.yAxis.axisPointer.label.formatter = '{value}';
        this._myChart.setOption(option);
      }
    }
  }
  _onlegendselectchanged1(params) {
    const { supplyAndDemandAnalysisMap, currentIndex } = this.state;
    this._onFistPostion(supplyAndDemandAnalysisMap[currentIndex], params.selected, false, true);
  }
  _ontimelinechanged(params) {
    const { supplyAndDemandAnalysisMap, selected } = this.state;
    const { currentIndex } = params;
    this.setState({
      currentIndex,
    });
    this._onFistPostion(supplyAndDemandAnalysisMap[currentIndex], selected);
    this._computeData1(supplyAndDemandAnalysisMap[currentIndex]);
  }

  _tooltipFormatter(params) {
    const { supplyAndDemandAnalysisMap, currentIndex } = this.state;
    let array = [];
    let barArr = [];
    let lineArr = [];
    let timer = '';
    const dataValue = supplyAndDemandAnalysisMap[currentIndex];
    params.forEach((item) => {
      let data;
      dataValue.find((t) => item.seriesName === t.name && (data = t.list?.[item.dataIndex]));
      timer = item.name;
      lineArr.push({
        name: item.seriesName,
        // value: formatCopper1(item.value),
        value: formatCopper1(data.value),
        color: item.color,
      });

      array = lineArr.concat(barArr);
    });
    this.__tooltip_ && this.__tooltip_.show(timer, array);
  }
  _tooltipFormatterFun(params) {
    let array = [];
    let barArr = [];
    let lineArr = [];
    let timer = '';
    params.forEach((item) => {
      timer = item.name;

      lineArr.push({
        name: item.seriesName,
        value: formatCopper1(item.value),
        color: item.color,
      });

      array = lineArr.concat(barArr);
    });
    this.__tooltip1_ && this.__tooltip1_.show(timer, array);
  }

  onOpenPicker = (open) => {
    const { supplyAndDemanStart, supplyAndDemanEnd } = this.state;
    let rangeDates = open ? [supplyAndDemanStart, supplyAndDemanEnd] : this.state.rangeOldData;
    this.setState(
      {
        rangeOldData: rangeDates,
      },
      () => {
        if (!open && !this.state.supplyAndDemanEnd.length) {
          this.setState({
            supplyAndDemanStart: this.state.rangeOldData[0],
            supplyAndDemanEnd: this.state.rangeOldData[1],
          });
        }
      },
    );
    if (open) {
      this.setState({
        supplyAndDemanStart: '',
        supplyAndDemanEnd: '',
      });
    }
  };

  onDisplace = () => {
    const { substitution, supplyAndDemandAnalysisMap, timeline, currentIndex } = this.state;
    const substitutionStr =
      substitution === 'powergrid'
        ? 'intelligence'
        : substitution === 'intelligence'
        ? 'dongRun'
        : substitution === 'dongRun'
        ? 'huiNeng'
        : substitution === 'huiNeng'
        ? 'powergrid'
        : 'powergrid';
    this.setState(
      {
        substitution: substitutionStr,
      },
      () => {
        if (supplyAndDemandAnalysisMap.length) {
          this._computeData(supplyAndDemandAnalysisMap, timeline);
          this._onFistPostion(supplyAndDemandAnalysisMap[currentIndex]);
          this._myChart.dispatchAction({
            type: 'timelineChange',
            // 时间点的 index
            currentIndex: currentIndex,
          });
        }
      },
    );
  };

  onhidedden = () => {
    const { hiddenEcharts, supplyAndDemandAnalysisMap, currentIndex } = this.state;
    this.setState(
      {
        hiddenEcharts: !hiddenEcharts,
      },
      () => {
        this._onFistPostion(supplyAndDemandAnalysisMap[currentIndex], false);
      },
    );
  };

  render() {
    const {
      isCharLoading,
      supplyAndDemandUnit,
      supplyAndDemandAnalysisMap,
      emptyMessage,
      supplyAndDemanStart,
      supplyAndDemanEnd,
      hiddenEcharts,
    } = this.state;
    const { buttonPermissions, title = '', formValue } = this.props;
    const hasSave =
      buttonPermissions.filter((item) => item.menuCode === 'gongXuFenXiDaoChu').length > 0;
    const flag = supplyAndDemandAnalysisMap.length > 0;
    return (
      <BoxWrap>
        {/* <Card> */}
        <Spin spinning={isCharLoading}>
          <Row type="flex" align="middle" className={styles.plan_row}>
            <div className={styles.Echart_title}>{title}</div>
            <div className={styles.Echart_function}>
              {['PXBMX', 'PDBLJ'].includes(formValue?.marketId) ? (
                ''
              ) : (
                <>
                  <div className={styles.but1}>
                    <Button type="text" onClick={this.onDisplace.bind(this)}>
                      <SyncOutlined />
                      交换
                    </Button>
                  </div>
                  <div className={styles.vline} />
                </>
              )}
              <Select
                onChange={this._onChangeSuffix.bind(this)}
                value={supplyAndDemandUnit}
                className={styles.dq_datepicker}
                bordered={false}
                suffixIcon={<CaretDownOutlined style={{ fontSize: '12px' }} />}
              >
                {TIME_SUFFIX.map((item) => (
                  <Option key={item.value} value={item.value}>
                    {item.title}
                  </Option>
                ))}
              </Select>
              <div className={styles.vline} />
              <RangePicker
                onChange={this._onChangeDatePicker.bind(this)}
                value={
                  supplyAndDemanStart
                    ? [
                        moment(supplyAndDemanStart, dateFormat1),
                        moment(supplyAndDemanEnd, dateFormat1),
                      ]
                    : []
                }
                format={dataFormats}
                separator="-"
                allowClear={false}
                bordered={false}
                onOpenChange={this.onOpenPicker.bind(this)}
                className={styles.rangePicker}
              />
              {flag ? <div className={styles.vline} /> : null}
              <div style={{ flex: 1 }} />
              {flag ? (
                <div className={styles.savegraies}>
                  <a
                    className={hasSave ? '' : styles.savegray}
                    onClick={this._exportInfo.bind(this, hasSave)}
                  >
                    <UploadOutlined
                      style={
                        hasSave
                          ? { fontSize: 14, color: 'var(--font-primary)', marginRight: 5 }
                          : { fontSize: 14, color: 'rgba(0, 0, 0, 0.25)', marginRight: 5 }
                      }
                    />
                    导出
                  </a>
                </div>
              ) : null}
              {['PXBMX', 'PDBLJ'].includes(formValue?.marketId) ? (
                ''
              ) : (
                <div>
                  <Button type="primary" ghost onClick={this.onhidedden.bind(this)}>
                    {hiddenEcharts ? '隐藏对比' : '显示对比'}
                  </Button>
                </div>
              )}
            </div>
          </Row>
          {!flag ? (
            <div className={styles.emptychart}>
              <TRDefault type="emptysm" message={emptyMessage} />
            </div>
          ) : null}
          <Row type="flex" align="middle" className={styles.tooltip}>
            <TRTooltip suffixText="单位：MW" ref={(e) => (this.__tooltip_ = e)} />
          </Row>

          <div
            style={flag ? { paddingBottom: '20px' } : { height: '0px', overflow: 'hidden' }}
            className={styles.chart}
          >
            <div className={styles.predict}>预测版本</div>
            <div
              id="echartdeman"
              style={{
                height: '300px',
                width: '100%',
              }}
            />
          </div>
          <div
            style={
              hiddenEcharts && flag
                ? { paddingBottom: '20px' }
                : { height: '0px', overflow: 'hidden' }
            }
            className={styles.chart1}
          >
            <TRTooltip suffixText="单位：MW" ref={(e) => (this.__tooltip1_ = e)} />
            <div
              id="echartdeman1"
              style={{
                height: '300px',
                width: '100%',
              }}
            />
          </div>
        </Spin>
      </BoxWrap>
    );
  }
}

export default connect(({ global }) => ({
  buttonPermissions: global.configure.buttonPermissions,
  global: global,
}))(DemandSupplyAnalysis);
